{% extends 'base.html' %}
{% block legend %}Dubbo接口测试工具{% endblock %}
{% block content %}
    <blockquote class="layui-elem-quote">可以直接测试dubbo接口</blockquote>
    <script src="/static/js/jquery-3.7.0.min.js"></script>
    <script src="/static/js/vue3.js"></script>
    <div class="layui-row">
        <div class="layui-col-md6">
            <h2>History</h2>
            <ul id="history"></ul>
            {% if  info %}
                <form id="dubbo_form" action="#" class="layui-form layui-form-pane"  target="nm_iframe">

                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" autocomplete="off"
                                       placeholder="请输入地址信息" class="layui-input layui-font-gray"
                                       value="{{ info['host'] }}" readonly>
                                <input type="text" autocomplete="off" name="host"
                                       placeholder="请输入地址信息" class="layui-input layui-font-gray" value="{{ info['host'] }}" autocomplete="on">
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">端口</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" autocomplete="off"
                                       placeholder="请输入端口信息" class="layui-input layui-font-gray"
                                       value="{{ info['port'] }}" readonly>
                                <input type="text" autocomplete="off" name="port"
                                       placeholder="请输入端口信息" class="layui-input layui-font-gray" value="{{ info['port'] }}" autocapitalize="on">
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">服务</label>
                        <div class="layui-input-block">
                            <label>
                                <input type="text" name="service" autocomplete="off"
                                       placeholder="请输入服务信息" class="layui-input layui-font-gray" readonly
                                       value="{{ info['service'] }}">
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">接口</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="method" lay-search>
                                    <option value=""></option>
                                    {% for method in info['method'] %}
                                        {% if req %}
                                            {% if req['method']==method %}
                                                <option name="method" selected>{{ req['method'] }}</option>
                                            {% else %}
                                                <option name="method">{{ method }}</option>
                                            {% endif %}
                                        {% else %}
                                            <option name="method">{{ method }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">参数</label>
                        <div class="layui-input-block">
                            <label>
                        <textarea type="text" name="args" autocomplete="off"
                                  placeholder="请输入请求参数" class="layui-textarea layui-font-red"
                                  style="margin-top: 0px; margin-bottom: 0px;">{{ req['args'] if req }}</textarea>
                            </label>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-btn-container">
                            <button id="submitBtn" class="layui-btn">提交</button>
                            <a href="/">
                                <button type="button" class="layui-btn layui-bg-gray">返回</button>
                            </a>
                        </div>
                    </div>

                </form>

            {% else %}
                <form class="layui-form layui-form-pane" method="POST">

                    <div class="layui-form-item">
                        <label class="layui-form-label">服务API</label>
                        <div class="layui-input-block">
                            <label>
                                <select name="service" lay-search required >
                                    <option value="">请选择服务API</option>
                                    {% for service in services %}
                                        <option value="{{ service }}">{{ service }}</option>
                                    {% endfor %}
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="layui-btn-container">
                        <button type="submit" class="layui-btn">搜索</button>
                    </div>

                </form>

            {% endif %}

        </div>

        <div class="layui-col-md6">
             <div><a href="http://hohode.com/static/page/tool/json-format.html" target="_blank">JSON格式化</a></div>
             <pre id="result"> </pre>
        </div>
    </div>
    <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
    <script src="/static/js/dubbo.js"></script>
    <script>

        $(document).ready(function(){
            $("#submitBtn").click(function(){
                console.log( "submit click" );
                jQuery.post("/dubbo/dubbo_invoke2", $( "#dubbo_form" ).serialize(),function(response){
                    console.log('response',response);
                    //将字符串转为json对象,并捕获可能的异常
                    try{
                        let jo = JSON.parse(response);
                        $("#result").text(jo)
                    }catch (e) {
                        $("#result").text(response)
                    }
                })
            });
        });
    </script>

    <script>
        const searchHistory = JSON.parse(localStorage.getItem("searchHistory")) || [];
        const history = document.getElementById("history");

        // 初始化搜索历史列表
        for (let i = 0; i < searchHistory.length; i++) {
            const li = document.createElement("li");
            li.textContent = searchHistory[i];
            history.appendChild(li);
        }

        setInterval(function(){
            const input = document.querySelector("input[placeholder=请选择服务API]");
            if(input){
                const searchTerm = input.value;
                if (searchTerm) {
                    // 如果搜索词不为空，将其添加到历史记录中
                    if(!searchHistory.includes(searchTerm) && searchTerm.length>10){
                        searchHistory.unshift(searchTerm);
                        historyHistory = searchHistory.slice(0,5);
                        console.log(historyHistory)
                        localStorage.setItem("searchHistory", JSON.stringify(historyHistory));

                        // 清除历史记录列表，重新显示所有历史记录
                        history.innerHTML = "";
                        for (let i = 0; i < historyHistory.length; i++) {
                            const li = document.createElement("li");
                            li.textContent = searchHistory[i];
                            history.appendChild(li);
                        }
                    }
                }
            }
        },2000)



    </script>

    <style>
        pre#result {
            background: bisque;
            padding: 5px;
            color: black;
            font-size: 12px;
        }
        #history li {
            padding: 5px 0px;
            margin: 5px 0px;
        }
    </style>
{% endblock %}